<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formData" class="demo-form-inline" ref="form">
        <el-form-item label="资源名称" prop="name">
          <el-input v-model="formData.name" placeholder="资源名称"></el-input>
        </el-form-item>
        <el-form-item label="资源路径" prop="url">
          <el-input v-model="formData.url" placeholder="资源路径"></el-input>
        </el-form-item>
        <el-form-item label="资源分类" prop="categoryId">
          <el-select v-model="formData.categoryId" placeholder="资源分类">
            <el-option v-for="catgory in categoryList"
            :label="catgory.name" :key="catgory.id" :value="catgory.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button @click="handleCreate">新建资源</el-button>
    </div>
    <div v-loading="loading" element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.8)">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="50">
          </el-table-column>
          <el-table-column prop="name" label="资源名称" width="180">
          </el-table-column>
          <el-table-column prop="url" label="资源路径">
          </el-table-column>
          <el-table-column prop="description" label="描述">
          </el-table-column>
          <el-table-column prop="createdTime" label="添加时间" :formatter="formatter">
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      </template>
      <el-dialog title="编辑资源" :visible.sync="dialogFormVisible">
        <el-form :model="EditForm">
          <el-form-item label="资源名称" :label-width="formLabelWidth">
            <el-input v-model="EditForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="资源路径" :label-width="formLabelWidth">
            <el-input v-model="EditForm.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="资源分类" :label-width="formLabelWidth">
            <el-select v-model="EditForm.categoryId" placeholder="资源分类">
            <el-option v-for="catgory in categoryList"
            :label="catgory.name" :key="catgory.id" :value="catgory.id"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="EditForm.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleEdited">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
// eslint-disable-next-line
import { getResourcePages,getAllCategory,getResourceInfo,updateResource,DeleteResource } from '@/services/resource';

export default {
  name: 'ResourceConfig',
  created() {
    this.loadCategory();
    this.loadResource();
  },
  data() {
    return {
      formData: {
        name: '',
        url: '',
        categoryId: '',
      },
      EditForm: {},
      tableData: [],
      categoryList: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
      loading: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
    };
  },
  methods: {
    async loadCategory() {
      const { data } = await getAllCategory();
      if (data.code === '000000') {
        this.categoryList = data.data;
      } else {
        this.$message.error('资源分类加载失败');
      }
    },
    async loadResource() {
      this.loading = true;
      const { data } = await getResourcePages({
        current: this.currentPage,
        size: this.pageSize,
        name: this.formData.name,
        url: this.formData.url,
        categoryId: this.formData.categoryId,
      });
      if (data.code === '000000') {
        this.tableData = data.data.records;
        this.total = data.data.total;
      } else {
        this.$message.error('资源列表加载失败');
      }
      this.loading = false;
    },
    formatter(row) {
      const date = new Date(row.createdTime);
      return date.toLocaleString();
    },
    onSubmit() {
      this.loadResource();
    },
    onReset() {
      this.$refs.form.resetFields();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.loadResource();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadResource();
    },
    handleCreate() {
      this.dialogFormVisible = true;
      this.EditForm = {
        name: '',
        categoryId: '',
        url: '',
        description: '',
      };
    },
    async handleEdit(rowData) {
      const { data } = await getResourceInfo(rowData.id);
      if (data.code === '000000') {
        this.dialogFormVisible = true;
        this.EditForm = data.data;
      } else {
        this.$message.error('资源加载失败');
      }
    },
    async handleEdited() {
      const { data } = await updateResource(this.EditForm);
      console.log(data);
      if (data.code === '000000') {
        this.$message.success('资源更新成功');
        this.loadResource();
      } else {
        this.$message.error('资源更新失败');
      }
      this.dialogFormVisible = false;
    },
    async handleDelete(rowData) {
      const { data } = await DeleteResource(rowData.id);
      if (data.code === '000000') {
        this.$message.success('资源删除成功');
        this.loadResource();
      } else {
        this.$message.error('资源删除失败');
      }
    },
  },
};
</script>
